<template>
  <div class="user-mgmt-container">
    <h2>用户管理</h2>
    <form class="add-user-form" @submit.prevent="addUser">
      <input v-model="newUsername" placeholder="新用户名" required />
      <select v-model="newRole">
        <option value="admin">管理员</option>
        <option value="user">普通用户</option>
      </select>
      <button type="submit">添加用户</button>
    </form>
    <table class="user-table">
      <thead>
        <tr>
          <th>用户名</th>
          <th>角色</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.username">
          <td>{{ user.username }}</td>
          <td>
            <select v-model="user.role" @change="changeRole(user)">
              <option value="admin">管理员</option>
              <option value="user">普通用户</option>
            </select>
          </td>
          <td>
            <button @click="removeUser(user.username)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const users = ref([
  { username: 'admin', role: 'admin' },
  { username: 'user1', role: 'user' },
  { username: 'user2', role: 'user' }
])

const newUsername = ref('')
const newRole = ref('user')

function addUser() {
  if (!users.value.find(u => u.username === newUsername.value)) {
    users.value.push({ username: newUsername.value, role: newRole.value })
    newUsername.value = ''
    newRole.value = 'user'
  } else {
    alert('用户名已存在！')
  }
}

function removeUser(username) {
  users.value = users.value.filter(u => u.username !== username)
}

function changeRole(user) {
  // 这里只是前端演示，无需后端
}
</script>

<style scoped>
.user-mgmt-container {
  max-width: 600px;
  margin: 40px auto;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px #0001;
}
.add-user-form {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.user-table {
  width: 100%;
  border-collapse: collapse;
}
.user-table th, .user-table td {
  border: 1px solid #eee;
  padding: 8px;
  text-align: center;
}
.user-table th {
  background: #f8f8f8;
}
button {
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover {
  background: #369870;
}
</style> 